<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
		<title>同城购列表</title>
		<style>
            
            .quyu{ position: relative; margin-top: 0.625em; background: #fff; height: 3.125em; position: relative; }
            .quyu>div{ width: 25%; display: block; float: left;   height: 2.5em;}
            .quyu>div:last-child{ width: 30%;}
            .quyu ul{display: none; position: absolute; left: 0; background: #fff;  z-index: 20; padding:0; font-size: 0.8em; text-align: center; border: 1px solid #ccc;}
            .quyu>div span{ color: #ccc; font-size: 1.2rem; }
            .quyu li{ text-indent: 1em;  width: auto; height: 3em; line-height: 3em; text-align: left;}
            .quyu ul{ padding: 1em}
            .quyu li{  width: auto; float: left; padding:0 0.8em; margin:0; margin-right:1em; margin-top: 0.5em; border-radius: 5px;background: #fff; color: #ff3366; border: 1px solid #ff3366; text-align: center;text-indent: 0; height: 1.8em; font-size:1em; line-height: 1.8em;}
            .quyu .active{ background: #ff3366; border-radius:0.1em; color: #fff; }
            .quyu .action{ background: #ff3366; border-radius:0.1em; color: #fff; }
            .quyu h4{ border-left: 1px solid #ccc; font-size: 1rem; height: 1.875em; line-height: 1.875em; display: inline-block; margin: 0.625em 0; text-align: center; width: 100%; color: #666;}
            option{ font-size: 1em;}
            .xiangxia{ position: absolute; top: 0.3125em; right: 0.625em; z-index: 0; }
            .tu_2 img{
                width: 100%;
                padding: 0.625em 1em;
                background: #fff;
            }
            .bottombottom{ margin-top: 0.75em;}
            .toptop{ margin-top: 0.55em;}
        </style>
	</head>

	<body>
		<header>
			<a><span class="leftleft"></span></a>
			<h1>同城购列表</h1>
			<a class="xiaoxi4" href="javascript:;" onclick="openUrl('../user/moban_shengcheng.html?type=B2&actId=','mobansc');">免费发布</a>
		</header>
		<section class="quyu">
			<div>
				<h4 style="border: none;">区域<span class="bottombottom"></span></h4>
				<ul name="quyu" id="quyu">
				    
				</ul>
			</div>
			<div>
				<h4>分类<span class="bottombottom"></span></h4>
				<ul name="cate" id="cate">
				</ul>
			</div>
			<div>
				<h4>智能排序<span class="bottombottom"></span></h4>
				<ul name="sort" id="sort">  
					<li class="active" data-id="amount">实力优先</li>
					<li data-id="viewCount">浏览优先</li>
					<li data-id="dateTime">当前进行</li>
				</ul>
			</div>
		</section>
		<section class="same_city_search">
			<div>
				<ul class="list_a" id="actB2">
				</ul>
			</div>
		</section>
		<footer>
			<nav class="mui-bar mui-bar-tab">
				<a class="action" href="javascript:;" id="tcIndex">
                    <img src="../img/shouye.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a href="javascript:;" id="myfabu">
                    <img src="../img/fabu2.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a href="javascript:;" id="myInfo">
                    <img src="../img/mine.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
			</nav>
		</footer>
        <script>
        $(document).ready(function(){
            appcan.ready(function(){
                appcan.window.setBounce({
                    bounceType:0,
                    startPullCall:function(type){
                    },
                    downEndCall:function(type){
                        window.location.reload();
                    },
                    upEndCall:function(type){
                        appcan.window.resetBounceView(type);
                    },
                    color:"#fff"
                })
            })
        	$(".quyu h4").click(function(){
                if($(this).next("ul").css("display") == "block"){
                    $(this).next("ul").hide();
                }else{
                    $(".quyu h4").next("ul").hide();
                    $(this).next("ul").show();
                };
            });
        	//查询   区域列表
            appcan.ajax({
                type:"get",
                url:host+"/getAreaByName.json?cityName="+appcan.locStorage.getVal("ipcity"),
                dataType:"json",
                contentType: "application/json",
                success : function(dataResult) {
                    var actStr = '';
                    if(dataResult.data.length>0){
                        for(var i=0;i<dataResult.data.length;i++){
                            actStr +='<li data-id="'+dataResult.data[i].cityname+'">'+dataResult.data[i].cityname+'</li>';
                        }
                    }
                    $("#quyu").html(actStr);
                    
                    $("#quyu li").click(function(){
                        $(this).parent().hide();
                        if($(this).hasClass("active")){
                           $(this).removeClass("active");
                        }else{
                           $("#quyu li").removeClass("active");
                           $(this).addClass("active");
                        }
                        samecityList();
                    });
                }
            })
            //查询   分类列表
            var baseParam = {'pid':'2'}
            var param = serializePageJson(1,20,baseParam);
            appcan.ajax({
                type:"post",
                url:host+"/getCateByPid.json",
                data:param,
                dataType:"json",
                contentType: "application/json",
                success : function(dataResult) {
                    var dataList = dataResult.data.dataList;
                    var actStr = '';
                    if(dataList.length > 0){
                        for(var i=0;i<dataList.length;i++){
                            actStr +='<li data-id='+dataList[i].id+'>'+dataList[i].cateName+'</li>';
                        }
                    }
                    $("#cate").html(actStr);
                    
                    $("#cate li").click(function(){
                        $(this).parent().hide();
                        if($(this).hasClass("active")){
                           $(this).removeClass("active");
                        }else{
                           $("#cate li").removeClass("active");
                           $(this).addClass("active");
                        }
                        samecityList();
                    });
                }
            })
            
            $("#sort li").click(function(){
                $(this).parent().hide();
                $(this).parent().find("li").removeClass("active");
                $(this).addClass("active");
                samecityList();
            })
            
            //列表
            samecityList();
        });
        
        function samecityList () {
            var baseParam = {'actType':'B2','addName':appcan.locStorage.getVal("ipcity")}
            baseParam = getSearchType(baseParam);
            var param = serializePageJson(1,20,baseParam);
            appcan.ajax({
                type:"post",
                url:host+"/getActiveList.json",
                data:param,
                dataType:"json",
                contentType: "application/json",
                success : function(dataResult) {
                    var dataList = dataResult.data.dataList;
                    var actStr = "";
                    for(var i=0;i<dataList.length;i++){
                        actStr += '<li>';
                        actStr += '<a onclick="openUrl(\'info.html?actId='+dataList[i].id+'\',\'info\');">';
                        actStr += '<div>';
                        actStr += '<img src="'+hostIp+dataList[i].mainPic+'" onerror="javascript:src=\'../img/lizi1.png\'">';
                        actStr += '</div>';
                        actStr += '<div><p>'+(dataList[i].shopName||'');
                        actStr += '</p>'+dataList[i].summary+'';
                        actStr += '<i>'+dataList[i].createTime+'</i>';
                        actStr += '</div></a></li>';
                    }
                    $("#actB2").html(actStr);
                }
            })
        }
        function getSearchType (baseParam) {
            $(".quyu li").each(function(){
                if($(this).parent().attr("id")=='quyu' && $(this).hasClass("active")){
                    baseParam.region = $(this).attr("data-id");
                }
                if($(this).parent().attr("id")=='cate' && $(this).hasClass("active")){
                    baseParam.cateId = $(this).attr("data-id");
                }
                if($(this).parent().attr("id")=='sort' && $(this).hasClass("active")){
                    baseParam.orderBy = $(this).attr("data-id");
                }
            })
            return baseParam;
        }
        </script>
	</body>

</html>